<template>
  <div>
    <section id="J-listuser">
      <div class="director">
        <div class="director-border">
          <div class="director-img">
            <img :src="getImg()" alt />
          </div>
          <div class="director-info">
            <div class="item clearfix">
              <span class="title">{{info.nickname}}</span>
            </div>
            <div class="item clearfix">
              <span class="left">ID：</span>
              <span class="right">{{info.id}}</span>
            </div>
            <div class="item clearfix">
              <span class="left">姓名：</span>
              <span class="right">{{info.name}}</span>
            </div>
            <!-- <div v-if="isset_grade != 0" class="item clearfix">
              <span class="left">等级：</span>
              <span class="right">{{info.grade}}</span>
            </div> -->
            <div v-if="info.weixin_account" class="item clearfix">
              <span class="left">微信号：</span>
              <span class="right">{{info.weixin_account}}</span>
            </div>
            <div class="item clearfix">
              <span class="left">注册时间：</span>
              <span class="right">{{time}}</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
// import defaultImg from '@img/default_avatar.jpg'
import { getDirector } from '@/api/user/fxs/fxsApi'
import { formatDay } from '@/utils/index'

import Vue from 'vue'
export default Vue.extend({
  data() {
    return {
      defaultImg:'https://img.wifenxiao.com/h5-wfx/images/default_avatar.jpg',
      info: {
        id: '',
        name: '',
        nickname: '',
        grade: '',
        weixin_account: '',
        create_time: ''
      },
      isset_grade: null,
      time: ''
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      this.$loadingWrap.show()
      setTimeout(() => {
        this.$loadingWrap.close()
      }, 50000)
      getDirector().then(res => {
        this.$loadingWrap.close()
        if (res.status == 1) {
          if (res.data.ftitle_superior) {
              wx.setNavigationBarTitle({
                title: res.data.ftitle_superior
              })
          }
          this.info = res.data.info
          this.isset_grade = res.data.isset_grade
        } else {
          this.$Error(res.msg)
        }
      })
    },
    getImg() {
      if (this.info.is_compress && this.info.headimgurl) {
        return `${this.info.headimgurl}80x80`
      } else if (!this.info.is_compress && this.info.headimgurl) {
        return this.info.headimgurl
      } else {
        return defaultImg
      }
    }
  },
  computed: {
    getTime() {
      const time = this.info.create_time
      return formatDay(time)
    }
  },
  watch: {
    info(val) {
      this.time = formatDay(val.create_time)
    }
  }
})
</script>

<style lang="scss">
@import 'src/styles/mixin';
.director {
  width: 643px;
  margin:  90px auto 0;
  background: url('https://img.wifenxiao.com/h5-wfx/images/user/director_bg.png') no-repeat;
  background-size: 100% 100%;
  box-sizing: border-box;
  border-radius: 20px;
  &-border {
    padding-bottom: 150px;
    overflow: hidden;
    .director-img {
      width: 190px;
      height: 190px;
      margin: 92px auto 0;
      padding: 2px;
      background-color: #fff;
      border-radius: 50%;
      img {
        display: block;
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }
    .director-info {
      .item {
        color: #333;
        display: flex;
        align-items:center;
        flex-wrap: nowrap;
        line-height: 1;
        margin-bottom: 36px;
        &:first-child{
          margin: 18px 0 46px;
        }
        &:last-child{
          margin-bottom: 0;
        }
        .title{
          width: 100%;
          text-align: center;
          font-size: 32px;
          font-weight: bold;
        }
        .left {
          display: inline-block;
          width: 45%;
          font-size: 28px;
          text-align: right;
        }
        .right {
          flex: 1;
          font-size: 28px;
          font-weight: bold;
          @include showEllipsis;
        }
      }
    }
  }
}
</style>
